<script>
  import {link, push} from 'svelte-spa-router'
  import {onMount} from 'svelte';
  /*
			List component input param:
			{
					title: [],
					data: []
			}
	*/
  let clickStatus = false
  export let data = {title: [], data: []};

  function click() {
    let href = this.getAttribute("href");
    if (!href) return;
    push(href);
  }

  onMount(() => {
    if (localStorage.getItem("uid") == '-1') {
      clickStatus = true
    } else {
      clickStatus = false
    }
    if ((window.location.hash == '#/twoagents') || (window.location.hash == '#/threeagents')) {
      clickStatus = false
    }
  })

</script>
<!--href={arr.href} on:click={clickStatus?click:''}-->
<list>
		<table frame=void class="table is-fullwidth is-striped" >
				<thead style="border-bottom: 1px solid #eeeeee;text-align: center;">
				{#each data.title as title}
				<th style="border-bottom: 1px solid #eeeeee;text-align: center;">
						{title}
				</th>
				{/each}
				</thead>
				<tbody>
				{#each data.data as arr}
				<tr >
						{#each arr as item}
						{#if typeof item === "string" && item.indexOf("on:click") > -1 && !!arr.handler }
						<td style="border-bottom: 1px solid #eeeeee;text-align: center;"
								on:click={arr.handler}
								data-id={arr.id}> {@html item || '--'}</td>
						{:else}
						<td style="border-bottom: 1px solid #eeeeee;text-align: center;"> {@html item}</td>
						{/if}
						{/each}
				</tr>
				{/each}
				</tbody>
		</table>
</list>

<style>
		table{
				text-align: center;
		}
		table tr:nth-child(odd) {
				background: #FAFAFA;
				text-align: center;
		}

		th {
				color: #9E9E9E !important;
				font-size: 80%;
				text-align: center;
		}

		td {
				font-size: 80%;
				text-align: center;
		}
</style>
